<template>
	<div class="">
		<div class="input-group mb-3">
			<div class="input-group-prepend">
				<label class="input-group-text" for="inputGroupSelect01">一级分类</label>
			</div>
			<select @change="changeL2()" v-model="bookCode1" class="custom-select" id="inputGroupSelect01">
				<option selected value="-1">选择类别</option>
				<option v-for="bookClazz in bookL1" :key="bookClazz.classificationId" :value="bookClazz.classCode">
					{{bookClazz.classificationName}}
				</option>
			</select>
		</div>

		<div class="input-group mb-3" v-if="bookCode1 != -1">
			<div class="input-group-prepend">
				<label class="input-group-text" for="inputGroupSelect02">二级分类</label>
			</div>
			<select @change="changeL3()" v-model="bookCode2" class="custom-select" id="inputGroupSelect02">
				<option selected value="-1">选择类别</option>
				<option v-for="bookClazz in bookL2" :key="bookClazz.classificationId" :value="bookClazz.classCode">
					{{bookClazz.classificationName}}
				</option>
			</select>
		</div>

		<div class="input-group mb-3" v-if="bookCode2 != -1">
			<div class="input-group-prepend">
				<label class="input-group-text" for="inputGroupSelect03">三级分类</label>
			</div>
			<select v-model="bookCode3" class="custom-select" id="inputGroupSelect03">
				<option selected value="-1">选择类别</option>
				<option v-for="bookClazz in bookL3" :key="bookClazz.classificationId" :value="bookClazz.classCode">
					{{bookClazz.classificationName}}
				</option>
			</select>
		</div>

		<div class="input-group mb-3">
			<div class="input-group-prepend">
				<input v-model="searchBook.bookName" type="text" class="form-control" placeholder="图书名"
					aria-describedby="basic-addon1">
			</div>
			<button type="button" class="btn btn-secondary input-group-prepend" @click="searchByName()">搜索</button>
		</div>

		<div class="input-group mb-3">
			<div class="input-group-prepend">
				<label class="input-group-text" for="inputISBN">ISBN</label>
			</div>
			<div class="input-group-prepend">
				<input v-model="searchBook.bookIsbn" type="text" oninput="value=value.replace(/\D/g,'')"
					class="form-control" placeholder="ISBN" aria-describedby="basic-addon1" id="inputISBN">
			</div>
			<button type="button" class="btn btn-secondary input-group-prepend" @click="searchByISBN()">搜索</button>
		</div>

		<div v-if="page.list.length > 0" class="d-flex justify-content-around flex-wrap">
			<div class="card" style="width: 18rem; margin: 20px;" v-for="book in page.list" :key="book.bookId">
				<img :src="imgPath + book.bookImg" class="card-img-top" style="width: 286px; height: 286px;">
				<div class="card-body">
					<h5 class="card-title text-wrap text-truncate" style="height: 48px;">{{ book.bookName }}</h5>
					<p class="card-text text-wrap text-truncate">{{ book.bookAuthor }}</p>
				</div>
				<ul class="list-group list-group-flush">
					<li class="list-group-item d-flex justify-content-between">
						<span class="user-select-none">库存:</span>
						<span style="width: 80%;" class="text-truncate">{{ book.bookQuantity }}</span>
					</li>
					<li class="list-group-item d-flex justify-content-between">
						<span class="user-select-none">ISBN:</span>
						<span style="width: 80%;" class="text-truncate">{{ book.bookIsbn }}</span>
					</li>
				</ul>
				<div class="card-body">
					<a type="button" class="btn btn-outline-info card-link" @click="showInfo(book.bookId)">查看详情</a>
				</div>
			</div>
		</div>
		<div v-else>
			这里显示搜索结果
		</div>
		<nav aria-label="Page navigation example" v-if="page.navigatepageNums.length > 1">
			<ul class="pagination justify-content-center">
				<li class="page-item">
					<button type="button" class="page-link" @click="goToFirstPage()">首页</button>
				</li>
				<li class="page-item">
					<button type="button" class="page-link" :class="page.hasPreviousPage ? '' : 'd-none'"
						@click="goToPreviousPage()">上一页</button>
				</li>
				<li class="page-item" v-for="(navigatepageNum,index) in page.navigatepageNums" :key="index"
					:class="navigatepageNum == page.pageNum ? 'active' : ' '">
					<button type="button" class="page-link" @click="goToPage(navigatepageNum)"
						v-if="navigatepageNum == page.pageNum || navigatepageNum == page.pageNum + 1 || navigatepageNum == page.pageNum + 2 || navigatepageNum == page.pageNum - 1 || navigatepageNum == page.pageNum - 2">{{navigatepageNum}}</button>
				</li>
				<li class="page-item">
					<button type="button" class="page-link" :class="page.hasNextPage ? '' : 'd-none'"
						@click="goToNextPage()">下一页</button>
				</li>
				<li class="page-item">
					<button type="button" class="page-link" @click="goToLastPage()">{{page.pages}}</button>
				</li>
			</ul>
		</nav>
	</div>

</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	import {
		useStore,
	} from "vuex";
	import axios from "axios";

	export default {
		props: {
			//入口参数
		},
		components: {
			//引入组件
		},
		setup() {
			//实例化userouter
			const router = useRouter();
			const store = useStore();
			store.state.ifFrameShow = true;
			onMounted(() => {
				axios
					.get("QueryL1")
					.then((response) => (data.bookL1 = response.data.data))
					.catch((error) => console.log(error));
			});
			const data = reactive({
				books: [],
				bookL1: [],
				bookL2: [],
				bookL3: [],
				page: {
					endRow: 0,
					hasNextPage: false,
					hasPreviousPage: false,
					isFirstPage: false,
					isLastPage: false,
					list: [],
					navigateFirstPage: 0,
					navigateLastPage: 0,
					navigatePages: 0,
					navigatepageNums: [],
					nextPage: 0,
					pageNum: 0,
					pageSize: 0,
					pages: 0,
					prePage: 0,
					size: 0,
					startRow: 0,
					total: 0
				},
				bookCode1: -1,
				bookCode2: -1,
				bookCode3: -1,
				searchBook: {
					bookClassificationId: -1,
					bookCode: '',
					bookName: '',
					bookIsbn: ''
				},
				imgPath: store.state.imageUrl,
				showInfo: (bookId) => {
					router.push({
						name: 'Book',
						query: {
							id: bookId,
						}
					})
				},
				
				/////////////////////////////////////////////////////////
				// 二级分类
				changeL2: () => {
					axios
						.get("QueryL2", {
							params: {
								L1: data.bookCode1
							}
						})
						.then((response) => {
							data.bookCode2 = -1
							data.bookCode3 = -1
							data.bookL2 = response.data.data
						})
						.catch((error) => console.log(error));
				},
				// 三级分类
				changeL3: () => {
					axios
						.get("QueryL3", {
							params: {
								L2: data.bookCode2
							}
						})
						.then((response) => {
							data.bookCode3 = -1
							data.bookL3 = response.data.data
						})
						.catch((error) => console.log(error));
				},
				// 搜索
				searchByName: () => {
					data.searchBook.bookCode = -1
					if (data.bookCode1 != -1) {
						data.searchBook.bookCode = data.bookCode1
					}
					if (data.bookCode2 != -1) {
						data.searchBook.bookCode = data.bookCode2
					}
					if (data.bookCode3 != -1) {
						data.searchBook.bookCode = data.bookCode3
					}
					// alert(data.searchBook.bookCode)
					axios
						.get("SearchBook", {
							params: {
								name: data.searchBook.bookName,
								code: data.searchBook.bookCode
							}
						})
						.then((response) => {
							if (response.data.msg === '查询为空') {
								alert("查询为空")
								data.initPage()
								return
							}
							data.page = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
				searchByISBN: () => {
					axios
						.get("SearchBookByIsbn", {
							params: {
								isbn: data.searchBook.bookIsbn,
							}
						})
						.then((response) => {
							if (response.data.msg === '查询为空') {
								alert("查询为空")
								data.initPage()
								return
							}
							data.page = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},



				//////////////////////////////////////////////////////////////////////
				// 换页操作
				goToFirstPage: () => {
					axios
						.get("SearchBook", {
							params: {
								pageNum: 1,
								name: data.searchBook.bookName,
								code: data.searchBook.bookCode
							}
						})
						.then((response) => {
							data.page = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
				goToLastPage: () => {
					axios
						.get("SearchBook", {
							params: {
								pageNum: data.page.pages,
								name: data.searchBook.bookName,
								code: data.searchBook.bookCode
							}
						})
						.then((response) => {
							data.page = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
				goToPreviousPage: () => {
					axios
						.get("SearchBook", {
							params: {
								pageNum: data.page.prePage,
								name: data.searchBook.bookName,
								code: data.searchBook.bookCode
							}
						})
						.then((response) => {
							data.page = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
				goToNextPage: () => {
					axios
						.get("SearchBook", {
							params: {
								pageNum: data.page.nextPage,
								name: data.searchBook.bookName,
								code: data.searchBook.bookCode
							}
						})
						.then((response) => {
							data.page = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
				goToPage: (page) => {
					axios
						.get("SearchBook", {
							params: {
								pageNum: page,
								name: data.searchBook.bookName,
								code: data.searchBook.bookCode
							}
						})
						.then((response) => {
							data.page = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
				initPage: () => {
					data.page = {
						endRow: 0,
						hasNextPage: false,
						hasPreviousPage: false,
						isFirstPage: false,
						isLastPage: false,
						list: [],
						navigateFirstPage: 0,
						navigateLastPage: 0,
						navigatePages: 0,
						navigatepageNums: [],
						nextPage: 0,
						pageNum: 0,
						pageSize: 0,
						pages: 0,
						prePage: 0,
						size: 0,
						startRow: 0,
						total: 0
					}
				}
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>

<style>
</style>
